<template>
	<view class="">
		<view class="addr-box bg_style" @tap="chooseAddress">
			<view class="addr-content">
				<view class="addr-icon addr-view"><image src="../../../../static/icons/jewel/order_addr.png"></image></view>
				<view class="addr-list addr-view">
					<view class="addr-nickname">{{orderData.realname}} {{orderData.mobile}}</view>
					<view class="addr-info">收货地址：{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address}}</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="good-box bg_style">
			<view class="common order-mer">
				<view class="common-box content-box">
					<view class="com-name">广东恒朗</view>
					<view class="com-contact">
						<!-- #ifdef APP-PLUS -->
						<button open-type='feedback' class="contact">
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<button open-type='contact' class="contact">
						<!-- #endif -->	
							<text class="iconfont icon-lianxi"></text>
							联系商家
						</button>
					</view>
				</view>
			</view>
			<!--珠宝-->
			<view class="good" v-for="(item,index) in orderData.jewelData" :key="index">
				<view class="lease content-box" @tap="goods_detail(item.goods_id)">
					<view class="lease-img"><image :src="item.thumb"></image></view>
					<view class="lease-info">
						<view class="lease-title">{{item.goods_name}}</view>
						<view class="lease-attr font-color-hs">{{item.item_names}}</view>
					</view>
					<view class="lease-price">
						<view class="lease-now">¥{{item.shop_price}}</view>
						<view class="lease-num font-color-hs">x{{item.buy_num}}</view>
					</view>
				</view>
			</view>
			<view class="total">
				<view class="t-l">实付款</view>
				<view class="t-r">¥{{orderData.order_amount}}</view>
			</view>
		</view>

		<view class="order-sn order-time-box">
			<view class="common-box content-box">
				<view class="order-time yunfei">
					<view class="">订单编号：{{orderData.order_no}}</view>
					<view class="" v-if="orderData.pay_status == 1">支付时间：{{orderData.pay_time}}</view>
					<view class="">下单时间：{{orderData.create_time}}</view>
					<view class="" v-if="orderData.pay_status == 1 && orderData.order_state == 7">是否已退款：{{orderData.return_money_state_text}}</view>
					<view class="" v-if="orderData.pay_status == 1 && orderData.order_state >= 3 && orderData.order_state <= 4">发货时间：{{orderData.send_time}}</view>
					<view class="" v-if="orderData.order_state == 5 || orderData.order_state == 6">还货状态：{{orderData.order_state_text}}</view>
					<view class="" v-if="orderData.order_state == 5 || orderData.order_state == 6">还货时间：{{orderData.return_time}}</view>
				</view>
			</view>
		</view>
		<view class="detail-comm">
			<view class="total">
				<view class="t-l">支付状态</view>
				<view class="t-r">
					{{orderData.pay_status_text}}
				</view>
			</view>
		</view>	
		
		<view class="detail-comm" v-if="orderData.pay_status == 1">
			<view class="total">
				<view class="t-l">订单状态</view>
				<view class="t-r">
					<view v-if="orderData.pay_status == 1">
						{{orderData.order_state_text}}
					</view>
					<view v-else>{{orderData.pay_status_text}}</view>
				</view>
			</view>
		</view>
		<view class="none"></view>
		<view class="footer">
			<view v-if="orderData.order_state == 7">订单已取消</view>
			<view v-if="orderData.pay_status == 0" @tap="go_pay(orderData.order_no)">去付款</view>
			<view @tap='handle_order(orderData.order_no, 1,"cancel_order")' v-if="orderData.order_state != 7 && orderData.order_state <3">取消订单</view>
			<view v-if="orderData.pay_status == 1 && orderData.order_state == 3" @tap='handle_order(orderData.order_no, 1,"cancel_order")'>确认收货</view>
			<view v-if="orderData.pay_status == 1 && orderData.order_state != 7 && orderData.order_state ==4 && orderData.order_state != 5 && orderData.order_state != 6" @tap="return_product(orderData.order_no)">还货</view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
	</view>
</template>
<script>
	import hl from '@/common/common_zb.js';
	export default {
		data() {
			return {
				orderData: [],	// 订单数据
				order_no: 0,	// 订单id
				addressData: [],	// 地址数据
				show_class: '',		// 显示填写身份证框
				bIsShowLoading: false
			}
		},
		onLoad({order_no}) {
			let that = this;
			that.order_no = order_no;
			this.get_load(order_no);
		},
		methods: {
			get_load(order_no){
				let that = this;
				that.bIsShowLoading = true;
				hl.post('pick/get_order_detail', {order_no: order_no}, true,function (res){
					let resdata = res.data;
					if(resdata.code == '-1') {
						hl.showToast(resdata.msg, 1000);
						setTimeout(function(){
							uni.navigateBack();
						}, 1000)
					}else{
						that.orderData = resdata.data;
						that.addressData = that.orderData.addressData;
					}
					that.bIsShowLoading = false;
				})
			},
			// 去珠宝详情页
			goods_detail(goods_id){
				uni.navigateTo({
					url: '/pages/jewel/agent/goods/show?goods_id=' + goods_id
				})
			},
			// 去支付
			go_pay(order_no){
				uni.navigateTo({
					url: '/pages/jewel/agent/order/orderinfo?order_no=' + order_no
				})
			},
			handle_order(order_no, type, url){
				let that = this;
				let text = type == '1' ? '确认要取消订单吗？': '确认已收到货了吗？';
				let sendurl = 'pick/' + url;
				uni.showModal({
					title: '提示',
					content: text,
					success: function (res) {
						if (res.confirm) {
							hl.post(sendurl, {order_no: order_no}, true, function (res){
								let resdata = res.data;
								hl.showToast(resdata.msg);
								setTimeout(function (){
									that.get_order_list({type: that.tab_index, page: that.page});
								}, 1000);
							})
						}
					}
				})
			},
			return_product(order_no){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要还货吗？',
					success: function (res) {
						if (res.confirm) {
							that.bIsShowLoading = true;
							hl.post('pick/return_product', {order_no: order_no}, true,function (res){
								let resdata = res.data;
								hl.showToast(resdata.msg, 1500);
								that.bIsShowLoading = false;
								that.get_load(order_no);
							})
						}
					}
				});
			},
			hide_perfect(){
				this.show_class = '';
			},
			// 申请售后
			apply(order_no){
				uni.navigateTo({
					url: '/pages/jewel/order/order_apply?order_no=' + order_no
				})
			}
		}
	}
</script>

<style>
page {
	background: #f6f6f6;
}
.bg_style {
	background: #fff;
	margin-bottom: 26rpx;
}
.font-color-hs {
	color: #999;
}
.lease-now {
	color: #666;
}
.addr-box {
	height: 100%;
	width: 100%;
	border-top: 1rpx solid #ececec;
	padding-top: 10rpx;
}
.addr-content {
	width: 95%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 13rpx;
	padding-bottom: 10rpx;
	justify-content: space-between;
}
.addr-content .addr-view {
	float: left;
}
.addr-content image {
	width: 39rpx;
	height: 39rpx;
}
.addr-icon {
	padding-left: 15rpx;
}
.addr-list {
	margin-left: 18rpx;
	font-size: 28rpx;
}
.addr-info {
	font-size: 25rpx;
	color: #727272;
	margin-top: 10rpx;
	line-height: 36rpx;
}
.good-box {
	height: auto;
	width: 100%;
	overflow: hidden;
}
.common {
	height: 124rpx;
	width: 100%;
	line-height: 124rpx;
}
.order-mer {
	height: 82rpx;
	line-height: 82rpx;
	border-bottom: 1px solid #ddd;
}
.com-name {
	float: left;
}
.content-box {
	width: 90%;
	height: 100%;
	margin: 0 auto;
	font-size: 24rpx;
	border-bottom: 1px solid #ddd;
}

.detail-com {
	height: 62rpx;
	overflow: hidden;
	color: #666;
}
.detail-com view {
	height: 62rpx;
	line-height: 80rpx;
}
.yunfei {
	float: left;
	width: 80%;
	height: 100%;
}
.butie {
	font-weight: bold;
}
.server {
	line-height: 40rpx !important;
}
.de-l {
	float: left;
}
.de-r {
	float: right;
}
.detail-com_b .de-r,
.detail-com_b .de-l {
	line-height: 40rpx !important;
}
.com-contact {
	float: right;
	color: #666;
	margin-top: 20rpx;
}
.com-contact image {
	width: 39rpx;
	height: 39rpx;
	position: relative;
	top: 10rpx;
}
.com-contact .icon-lianxi {
	color: #f32f2f;
	font-size: 36rpx;
	vertical-align: middle;
}
.good {
	height: 246rpx;
	width: 100%;
	overflow: hidden;
	margin-top: 30rpx;
	border-bottom: 1px solid #ddd;
}

.lease-img {
	float: left;
	width: 144rpx;
	height: 192rpx;
	border: 1rpx solid #c8c8c8;
	margin-right: 21rpx;
}
.lease-img image {
	width: 100%;
	height: 100%;
}
.lease-info {
	width: 368rpx;
	float: left;
	font-size: 26rpx;
}
.lease-title {
	height: 76rpx;
	overflow: hidden;
}
.lease-attr {
	height: 68rpx;
	overflow: hidden;
	font-size: 24rpx;
	margin-top: 10rpx;
}
.lease-price {
	float: right;
	font-size: 26rpx;
}
.lease-num {
	margin-top: 14rpx;
}
.lease-market-price {
	text-decoration: line-through;
}
.package-price {
	vertical-align: bottom;
}
.package {
	font-size: 26rpx;
	vertical-align: top;
}
.total {
	height: 82rpx;
	line-height: 82rpx;
	font-size: 26rpx;
	width: 90%;
	margin: 0 auto;
	font-weight: bold;
	color: #666;
	overflow: hidden;
}
.t-l {
	float: left;
}
.t-r {
	float: right;
}
.order-sn {
	background: #fff;
	margin-top: 20rpx;
	border-bottom: none;
	margin-bottom: 30rpx;
	overflow: hidden;
}
.order-sn .content-box {
	border-bottom: none;
}
.order-time view:first-child{
	margin-top: 6rpx;
}
.order-time view{
	height: 45rpx;
	line-height: 45rpx;
	color: #666;
}
.detail-comm {
	background: #fff;
	width: 100%;
	height: 82rpx;
	padding-bottom: 2px;
}
.detail-comm .total {
	border-bottom: 1rpx solid #ddd;
}
.detail-comm-f .total {
	border-bottom: none;
}
.none {
	height: 160rpx;
}
.footer {
	width: 100%;
	height: auto;
	overflow: hidden;
	background: #eaedf1;
	font-size: 28rpx;
	position: fixed;
	bottom: 0;
}
.footer view {
	box-sizing: border-box;
	width: auto;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	color: #686868;
	border: 1rpx solid #bfbfbf;
	border-radius: 6rpx;
	background: #fff;
	margin-top: 20rpx;
	float: right;
	margin-right: 14rpx;
	padding: 0 10rpx;
	margin-bottom: 20rpx;
}
.contact {
	background: none !important;
	font-size: 28rpx;
	color: #666;
}
.contact::after {
	content: none;
}
</style>
